<template>
	<view class="msgcard">
		<view class="avatar flex">
			<image :src="user.avatar" mode="aspectFill"></image>
			<view class="infoMsg">
				<view class="fwb">{{ user.name }}</view>
				<view class="c9">所属地:{{ user.city }}</view>
				<view class="c9">修改时间:{{ user.createDate }}</view>
			</view>
		</view>
		<view class="tell">{{ user.content }}</view>
		<view class="tellImg" v-if="user.img">
			<image :src="user.img" mode="aspectFill" @click="bigImg(user.img)"></image>
		</view>
		<view class="hif flex aic" @click="func()">
			<van-icon name="chat-o" size="20" class="mgr20" />
			<text>回复</text>
		</view>
		<van-divider />
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import { showImagePreview } from 'vant';
const props = defineProps({
	user: {
		type: Object
	},
	funK: {}
});
const user = reactive(props.user);
const func = () => {
	props.funK(user);
};
function bigImg(img) {
	showImagePreview({ images: [img], closeable: true });
}
</script>

<style lang="scss">
.msgcard {
	.avatar {
		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50px;
			border: 1px solid #eee;
			margin-right: 30rpx;
		}
		.infoMsg {
			width: 600rpx;
			view {
				font-size: 24rpx;
				&:nth-child(1) {
					font-size: 32rpx;
				}
				&:nth-child(2) {
					margin: 10rpx 0;
				}
			}
		}
	}
	.hif {
		font-size: 26rpx;
		width: 230rpx;
		margin: 30rpx 0;
		text:hover {
			color: red;
		}
	}
	.tell {
		width: 600rpx;
		word-wrap: break-word;
		margin-top: 30rpx;
		font-size: 28rpx;
		text-indent: 2rem;
		line-height: 1.8;
	}
	.tellImg {
		width: 400rpx;
		height: 200rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
